<template>
  <div class="searcherBox">
    <div class="aui-searchbar searchbar" id="search">
      <div class="aui-searchbar-input aui-border-radius">
        <i class="icon njfont nj-sousuo"></i>
        <!-- <form :action="local_host"> -->
          <input type="search" v-model="searchWord" placeholder="想买什么" id="search-input" autofocus>
        <!-- </form> -->
        <div class="aui-searchbar-clear-btn" style="display:block" v-show="searchWord != '' "
             @click="searchWord = ''">
          <i class="aui-iconfont aui-icon-close"></i>
        </div>
      </div>
      <div v-if="delSpace(searchWord) == ''" class="aui-searchbar-btn" :class="{'animate-left': isappear}"
           @click="$router.go(-1)" tapmode>取消
      </div>
      <div v-else class="aui-searchbar-btn aui-text-info" :class="{'animate-left': isappear}" @click="saveLocal"
           tapmode>搜索
      </div>
    </div>
    <transition name="fade">
      <div v-show="iii">
        <!-- <div style="height:2.9rem;"></div> -->
        <div class="centent">
        </div>
        <!--搜索历史-->
        <div class="aui-content-padded">
          <div class="search_history"><p>搜索历史</p><i class="icon njfont nj-shanchu" @click="delHistoryInfor ()"></i>
          </div>
          <div class="aui-btn" v-for="(item,index) in historySearch" :key="index" v-if="historySearch" @click=" changeSearchWord(item) ">{{item}}</div>
        </div>
        <!--搜索历史 end-->
        <!--热门搜索-->
        <div class="aui-content-padded">
          <p>热门搜索</p>
          <div class="aui-btn" v-for="(item,index) in hotSearch" :key="index" @click=" changeSearchWord(item) ">{{item}}</div>
        </div>
        <!--热门搜索 end-->
      </div>
    </transition>
  </div>
</template>

<script>
  // import Hello from './components/Hello'
  export default {
    data () {
      return {
        iii: false,
        searchWord: "",
        hotSearch: [
          "精品"
        ],
        historySearch: [],
        isappear: true,
      }
    },
    components: {
      
    },
    methods: {
      //初始化历史搜索记录
      initHistorouSearch () {
        var historySearch = JSON.parse(localStorage.getItem('njsearchHistory'))
        if (historySearch) {
          this.historySearch = historySearch
        }
      },
      //保存到历史记录中
      saveLocal () {
        var searchWord = this.delFESpace(this.searchWord);
        // 跳转到详情页
        this.$router.push("searchResult?clue=" + searchWord);
      },
      //删除历史记录
      delHistoryInfor () {
        localStorage.removeItem('njsearchHistory')
        this.historySearch = []
      },
      changeSearchWord (item) {
        console.log(location.href,"22323")
        this.$router.push("searchResult?clue=" + item);
      },
      //去掉空格
      delSpace (str) {
        return str.replace(/(\s+)/g, "")
      },
      // 去掉首位空格
      delFESpace (str) {
        return str.replace(/(^\s*)|(\s*$)/g, "")
      },
      //监听软键盘搜索键事件
      keyUpEvent (e) {
          if (e.keyCode === 13) {
            //按下了搜索键
            this.$router.push({name: "searchResult", query: {clue: this.searchWord}});
          }
        }
    },

    computed: {
      local_host (){
        // alert(location.href)
        // alert(location.host)
        // alert(location.href.substring(0,location.href.length-9));
        // return location.href.substring(0,location.href.length-9);
        // http://localhost:8082/#/home/searchResult?clue=ssd
        
        return location.href.replace("searcher", `searchResult?clue=${this.searchWord}`);
      }
    },
    mounted () {
      setTimeout(() => {
        this.iii = true
      }, 20)
    },
    created () {
      this.initHistorouSearch()
      window.addEventListener("keydown", this.keyUpEvent, false);
    },
    beforeDestroy() {
      window.removeEventListener("keydown", this.keyUpEvent, false);
    }
    
  }
</script>

<style scoped="">
    .aui-btn {
        margin-right: 0.3rem;
    }
    .searcherBox{
        text-align: left;
    }
    .aui-searchbar, .aui-bar-nav {
        position: static;
        left: 0;
        top: 0;
        z-index: 12;
    }
    .aui-border-radius {
        width: 200px !important;
        -webkit-box-flex: 1;
    }

    .animate-left {
        isplay: block;
        margin-right: 0 !important;
    }

    .fade-enter-active, .fade-leave-active {
        transition: transform 0.5s
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */
    {
        transform: translatex(100%);
    }

    /*#search{*/
    /*width: 18rem;*/
    /*}*/
</style>
